<!--消息框-->
<script setup lang="ts">
</script>
<template>
  <div class="message-box ">
    <div class="avatar">
      <img src="@/assets/image/avatar.jpg">
    </div>
    <div class="message">
      <div class="title-time">
        <div class="title">Soraki</div>
        <div class="time">2022/8/3</div>
      </div>
      <div class="message-content">你好！你好！你好！你好！你好！你好！你好！你好！</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.message-box {
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 3px 10px;
  user-select: none;
  cursor: pointer;

  .avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 38px;
      height: 38px;
    }
  }

  .message {
    height: 44px;
    width: calc(100% - 60px);

    .title-time {
      display: flex;
      justify-content: space-between;
      padding-right: 3px;
      align-items: center;

      .title {
        font-size: 14px;
        font-weight: 500;
        color: #2E3033;
      }

      .time {
        color: #8A8F99;
        font-size: 12px;
        transform: scale(0.9);
      }
    }

    .message-content {
      width: 160px;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: #8A8F99;
    }
  }
}

.message-box:hover {
  background-color: #F5F7FA;
}

.message-box:active {
  background-color: #F2F4F7;
}
</style>
